<template>
<div id="reday">
<ul>
    <hr>
    <h3 class="distance">近期最受欢迎</h3>
            <div class="movieinfo">
            <li v-for="red in readylist" :key="red.id">
                <div class="everyone">
                    <img :src="red.img">
                    <h3>{{red.nm}}</h3>
                    <span>{{red.wish}}想看</span><br>
                    <span>{{red.comingTitle}}</span>
                </div>
            </li>
            </div>
        <div class="overf"></div>    
        <div class="showmovie">
            <h3>2022年 待定</h3>
            <ul>
                <li v-for="red in readylist" :key="red.id" v-if="red.comingTitle=='2022年 待定'">
                    <div class="head-left">
                        <!-- 海报 -->
                        <van-row gutter="10" >
                            <van-col span="6"><img :src="red.img"></van-col>
                            <van-col span="12">
                                <h3>{{red.nm}}</h3>
                                <span class="spantext">主演:{{red.star}}</span><br>
                                <span>{{red.showInfo}}</span>
                            </van-col>
                            <van-col span="6">
                                <h3 class="h-active"><span style="font-size:16px">{{red.wish}}</span><span style="font-size:12px">人想看</span></h3>
                                <van-button type="primary" class="van-button" color="skyblue" text="预售"></van-button>
                            </van-col>
                        </van-row>
                    </div>
                </li>
            </ul>
        </div>
</ul>
</div>
</template>

<script>
export default {
    name:'readylist',
    props:["readylist"]
}
</script>

<style scoped>
*{
    padding:0 ;
    margin: 0;
}
.distance{
    margin: 10px 0;
}
.overf{
    width: 100%;
    height: 10px;
    background-color: rgba(228, 207, 207,0.4);
}
.movieinfo{
    margin: 10px 0;
    width: 100%;
    height: 230px;
    display: flex;
    overflow: auto;
}
.everyone{
    width: 100px;
    height: 180px;
    margin-left:10px;
    position: relative;
}
.everyone img{
    width: 100px;
    height: 150px;
}
.everyone h3{
    display: inline-block;
    width: 25vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
img{
    width: 100%;
    height: 100px;
}
.head-left{
    margin: 15px 0;
    padding: 0 15px;
}
.h-active{
    color: orange;
    font-weight: 700;
}
.hh-active{
    font-size: 20px;
}
.van-button{
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius:5px;
}
</style>
